* {
  padding: 0;
  margin: 0;
  color: #333;
  font-family: 'Microsoft Yahei';
  
}
ul,li,a {
  list-style: none;
  text-decoration: none;
}
img { 
  max-width:100%;
  vertical-align: bottom;	
}
.container{
   position: relative;
   margin:0 auto;
   width:1117px; 
}
@media screen and (max-width:1133px){
   .container{
     width:100%;
   }
}
 header {
  text-align: center;
  padding: 10px 0;/*为了解决外边距溢出的问题。一般都用padding 来解决*/
}
.navbar-top { 
	text-align: center;
	font-size: 0;
	background:#363636; 
	
}
.navbar-top > ul {
	/* overflow:hidden; *//* 清楚浮动的影响 */
	display: inline-block;/* 文本居中 */
	position: relative;
}
.navbar-top > ul > li {
	float:left;
}
.navbar-top > ul > li > a {
    position: relative;
	margin: 0 36px;
	padding: 15px 12px;
	color: #fff;
	font-size: 16px;
	transition:all .35s;
	display: block;
}
.navbar-top > ul > li > a::after{/* 伪对象 */
    content:'';
    position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition:width .35s;
	transform:translateX(-50%);
}
.navbar-top > ul > li > a:hover{
   color: #c5842d;
}
.navbar-top > ul > li > a:hover::after{
   width: 75px;
}
.navbar-top > ul > li.active > a{
   color: #c5842d;
}
.navbar-top > ul > li.active > a::after{
   width: 75px;
}

.navbar-top > ul > li >.details { 
	position:absolute; 
	right:320px;
	top:50px;
	width:120px; 
	background:red; 
	/* display:none; */ 
	z-index:999;
	height: 0px;

}
.menu {
	overflow: hidden;
}
.navbar-top > ul > li > .details a{
	width:84px;
	display:block; 
	color:#fff; 
	padding-right:40px; 
	font-size:14px; 
	text-align:center; 
}
.navbar-top li:hover .details{ 
	height: 100px;
}
.navbar-top .details>a:hover { 
	color:#fff; 
	background:#0000ff;
}
.navbar-top li.one {
	position: relative;
}
.navbar-top .figure {
	width: 0;
	border:6px solid transparent;
	border-top: 6px solid #fff;
	position: absolute;
	right: 30px;
	top: 23px;
}
.navbar-top li.one:hover .figure{
	border-top: 6px solid #c5842d;
}
.navbar-top .nav-details {
	position: absolute;
	right: 20px;
	top: 100%;
	width: 160px;
	z-index: 999;
	opacity: 0;
	background: rgba(255,255,255,.4);
	transition:all .8s;
}
.navbar-top .nav-details > a {
	padding: 10px 0 10px 50px;
	display: block;
	color: #000;
	font-size: 16px;
}
.navbar-top li.one:hover .nav-details{
	opacity: 1;
	top:0px;
}
.navbar-top .nav-details a:hover{
	color: #c5842d;
	background: rgba(255,255,255,.7);
 }
@media screen and (max-width:992px){
    .container {
	   width:820px;
	}
	.navbar-top > ul > li > a {
		 margin:0 18px;
	}
}
@media screen and (max-width:768px){/*平板的宽度，小于768px是手机端的宽度,屏幕宽度自适应*/
	body{
		 width:768px;
	}
}
 